﻿Ext.onReady(function() {

    Ext.QuickTips.init();

    var form = new Ext.form.FormPanel({
        renderTo: 'docbody',
        title: 'Composite Fields',
        autoHeight: true,
        width: 600,

        bodyStyle: 'padding:5px',
        defaults: {
            anchor: '0'
        },
        items:
    [
        {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email Address',
            anchor: '-20'
        },
        {
            xtype: 'compositefield',
            fieldLabel: 'Date Range',
            msgTarget: 'side',
            anchor: '-20',
            defaults:
            {
                flex: 1
            },
            items:
            [
                {
                    xtype: 'datefield',
                    name: 'startDate',
                    fieldLabel: 'Start'
                },
                {
                    xtype: 'datefield',
                    name: 'endDate',
                    fieldLabel: 'End'
                }
            ]
        }, //end compositefield
        {
        xtype: 'fieldset',
        title: 'Details',
        collapsible: true,
        items:
            [
            {
                xtype: 'compositefield',
                fieldLabel: 'Phone',
                msgTarget: 'under',
                items:
                [
                    { xtype: 'displayfield', value: '(' },
                    { xtype: 'textfield', name: 'phone-1', width: 29, allowBlank: false },
                    { xtype: 'displayfield', value: ')' },
                    { xtype: 'textfield', name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0' },
                    { xtype: 'textfield', name: 'phone-3', width: 48, allowBlank: false }
                ]
            },
            {
                xtype: 'compositefield',
                fieldLabel: 'Time worked',
                combineErrors: false,
                items:
                [
                    {
                        name: 'hours',
                        xtype: 'numberfield',
                        width: 48,
                        allowBlank: false
                    },
                    {
                        xtype: 'displayfield',
                        value: 'hours'
                    },
                    {
                        name: 'minutes',
                        xtype: 'numberfield',
                        width: 48,
                        allowBlank: false
                    },
                   {
                       xtype: 'displayfield',
                       value: 'mins'
                   }
                ]
            },
        {
            xtype: 'compositefield',
            anchor: '-20',
            msgTarget: 'side',
            fieldLabel: 'Full Name',
            items: [
                {
                    width: 50,
                    xtype: 'combo',
                    mode: 'local',
                    value: 'mrs',
                    triggerAction: 'all',
                    forceSelection: true,
                    editable: false,
                    fieldLabel: 'Title',
                    name: 'name',
                    hiddenName: 'title',
                    displayField: 'name',
                    valueField: 'value',
                    store: new Ext.data.JsonStore({
                        fields: ['name', 'value'],
                        data: [
                            { name: 'Mr', value: 'mr' },
                            { name: 'Mrs', value: 'mrs' },
                            { name: 'Miss', value: 'miss' }
                        ]
                    })
                },
                {
                    xtype: 'textfield',
                    flex: 1,
                    name: 'firstName',
                    fieldLabel: 'First',
                    allowBland: false
                },
                 {
                     xtype: 'textfield',
                     flex: 1,
                     name: 'lastName',
                     fieldLabel: 'Last',
                     allowBlank: false
                }
            ]
        }
        ]
}  //fieldsetend 
    ],
    buttons:
    [
        text:'Load test data',
        handler:function() {
             var Record = Ext.data.Record.create([
                       {name: 'email',     type: 'string'},
                       {name: 'title',     type: 'string'},
                       {name: 'firstName', type: 'string'},
                       {name: 'lastName',  type: 'string'},
                       {name: 'phone-1',   type: 'string'},
                       {name: 'phone-2',   type: 'string'},
                       {name: 'phone-3',   type: 'string'},
                       {name: 'hours',     type: 'number'},
                       {name: 'minutes',   type: 'number'},
                       {name: 'startDate', type: 'date'},
                       {name: 'endDate',   type: 'date'}
             ]);
             
             form.form.loadRecord(new Record({
                        'email'    : 'ed@extjs.com',
                        'title'    : 'mr',
                        'firstName': 'Abraham',
                        'lastName' : 'Elias',
                        'startDate': '01/10/2003',
                        'endDate'  : '12/11/2009',
                        'phone-1'  : '555',
                        'phone-2'  : '123',
                        'phone-3'  : '4567',
                        'hours'    : 7,
                        'minutes'  : 15
             })
             );
        }
        },
        {
            text:'Save',
            hander:function() {
                if (form.form.isValid()) {
                    var s = "";
                    
                    Ext.iterate(form.form.getValues(),function(key,value)
                    {
                        s += String.format("{0} = {1}<br />",key,value);
                    },this
                    );
                    
                    Ext.example.msg('Form Values',s);
                }
            }
        },
        
        {
            text:'Reset',
            handler:function() {
                form.form.reset();
            }
        }
    ]
    });
});